<template >
  <div id="header">
    <Header></Header>
  </div>
  <div id="main" class="inner home-inner">
    <div class="item">
      <h5 class="mb-2">个人中心</h5>
      <el-menu default-active="userresume" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        @select="handleMenu" >
        <el-menu-item index="userresume"  @click="showResume()">
          <span>个人简历</span>
        </el-menu-item>
        <el-sub-menu index="userinfomanage">
          <template #title>
            <span>信息管理</span>
          </template>
          <!-- <el-menu-item index="basicInfo" route="/userhome/basicInfo" @click="showInfoManage()">基本信息</el-menu-item> -->
          <el-menu-item index="setAccount"  @click="setAccount()">账号设置</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="userJobLog">
          <template #title>
            <span>求职记录</span>
          </template>
          <el-menu-item index="userApplyJob"  @click="setApplyJob()">已申请</el-menu-item>
          <el-menu-item index="userCollectionJob"  @click="setUserCollectionJob()" >已收藏</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <div class="content">
      <UserResume v-if="isShowResume " />
      <!-- <UserBasicInfo v-if="isShowInfo"/> -->
      <UserAccountSet v-if="isShowAccount" />
      <UserApplyJob v-if="isUserApplyJob" />
      <UserCollectionJob v-if="isUserCollectionJob" />
    </div>
  </div>
</template>
<script lang='ts'>
import UserResume from "@/components/user/UserResume.vue"
import UserBasicInfo from "@/components/user/UserBasicInfo.vue"
import UserAccountSet from "@/components/user/UserAccountSet.vue"
import UserApplyJob from "@/components/user/UserApplyJob.vue"
import UserCollectionJob from "@/components/user/UserCollectionJob.vue"
import { ref, onMounted, reactive, getCurrentInstance } from "vue"
import { useRoute,useRouter } from 'vue-router'
import { useStore } from "vuex"
import {userMenu} from "@/utills/data"
export default {
  name: 'UserHome',
  components: { UserResume, UserBasicInfo, UserAccountSet,UserApplyJob,UserCollectionJob },
  setup() {
    const store = useStore()
    const router=useRouter()
    // @ts-ignore
    const { proxy } = getCurrentInstance() // 1.获取proxy实例
    const route = useRoute()
    const index = ref()

    const isShowResume = ref(true)
    const isShowInfo = ref(false)
    const isShowAccount = ref(false)
    const isUserApplyJob = ref(false)
    const isUserCollectionJob = ref(false)

    function showResume() {
      isShowResume.value = true
      isShowInfo.value = false
      isShowAccount.value = false
      isUserApplyJob.value = false
      isUserCollectionJob.value = false
    }
    function showInfoManage() {
      isShowResume.value = false
      isShowInfo.value = true
      isShowAccount.value = false
      isUserApplyJob.value = false
      isUserCollectionJob.value = false
    }
    function setAccount() {
      isShowResume.value = false
      isShowInfo.value = false
      isShowAccount.value = true
      isUserApplyJob.value = false
      isUserCollectionJob.value = false
    }
    function setApplyJob() {
      isShowResume.value = false
      isShowInfo.value = false
      isShowAccount.value = false
      isUserApplyJob.value = true
      isUserCollectionJob.value = false
    }
    function setUserCollectionJob() {
      isShowResume.value = false
      isShowInfo.value = false
      isShowAccount.value = false
      isUserApplyJob.value = false
      isUserCollectionJob.value = true
    }



    const handleMenu = (key: string, keyPath: string[]) => {
      // index.value=key
      console.log(key);

    }
    const handleOpen = (key: string, keyPath: string[]) => {

      // console.log(route.params);

    }
    // 关闭子菜单被调用
    const handleClose = (key: string, keyPath: string[]) => {

      // console.log(1)

    }
    const data = reactive({

      loginId: localStorage.getItem("loginData") ? JSON.parse(localStorage.getItem("loginData") || "").loginId : null,
      identity: localStorage.getItem("loginData") ? JSON.parse(localStorage.getItem("loginData") || "").identity : null,
      token: localStorage.getItem("loginData") ? JSON.parse(localStorage.getItem("loginData") || "").token : null,
    })

    // 采用async
    const getUserInfo = async () => {
      // 请求后端，请求用户头像
      proxy.$api.userApi.getUserInfo(data).then((res: any) => {
        console.log(res.data,"111");
        
        // 基本信息
        store.state.userState.userBasicInfo.name = res.data.name
        store.state.userState.userBasicInfo.gander = res.data.gander
        store.state.userState.userBasicInfo.birth = res.data.birth
        store.state.userState.userBasicInfo.birthAddress = res.data.birthAddress
        store.state.userState.userBasicInfo.newAddress = res.data.newAddress
        store.state.userState.userBasicInfo.politicalOutlook = res.data.politicalOutlook
        store.state.userState.userBasicInfo.phone = res.data.phone
        store.state.userState.userBasicInfo.email = res.data.email
        // 求职状态
        store.state.userState.userJobState = res.data.jobState

        // 求职意向
        store.state.userState.userJobIdens.title = res.data.jobTitle
        store.state.userState.userJobIdens.salaryMin = res.data.jobSalary[0]
        store.state.userState.userJobIdens.salaryMax = res.data.jobSalary[1]
        store.state.userState.userJobIdens.city = res.data.jobCity
        store.state.userState.userJobIdens.jobNature = res.data.jobNature
        store.state.userState.userJobIdens.industry = res.data.jobIndustry
        // 教育经历
        store.state.userState.userEdu.schoolName = res.data.eduSchoolName
        store.state.userState.userEdu.education = res.data.eduEducation
        store.state.userState.userEdu.major = res.data.eduMajor
        store.state.userState.userEdu.schoolTime = res.data.schoolTime
        store.state.userState.userEdu.eduMajorDetail = res.data.eduMajorDetail
        // 工作经历
        store.state.userState.userJobEx.jobExTime = res.data.jobExTime
        store.state.userState.userJobEx.jobExEnterprise = res.data.jobExEnterprise
        store.state.userState.userJobEx.jobExLevel = res.data.jobExLevel
        store.state.userState.userJobEx.jobExDetail = res.data.jobExDetail
        // 项目经验
        store.state.userState.userProjectEx.projectTime = res.data.projectTime
        store.state.userState.userProjectEx.projectEnterprise = res.data.projectEnterprise
        store.state.userState.userProjectEx.projectName = res.data.projectName
        store.state.userState.userProjectEx.projectDetail = res.data.projectDetail

        // 荣誉奖项
        store.state.userState.userHonors = res.data.userHonors
        // 自我评价
        store.state.userState.userSelfEvaluation = res.data.userSelfEvaluation
        
        
        // store.state.userState.userSelfEvaluation = res.data.userSelfEvaluation
        

        // console.log(res.data);

      })

    }


    onMounted(() => {
      // router.addRoute(userMenu)
      getUserInfo()
      // console.log(route.params.id);
      // if (route.params.id == "userresume") {
      //   showResume()
      // } else if (route.params.id == "basicInfo") {
      //   showInfoManage()
      // } 
      // else if (route.params.id == "setAccount") {
      //   setAccount()
      // }
      // else if (route.params.id == "userApplyJob") {
      //   setApplyJob()
      // }
      // else if (route.params.id == "userCollectionJob") {
      //   setUserCollectionJob()
      // }
      // index.value = route.params.id
    })
    return {
      handleOpen,
      handleClose,
      showResume,
      showInfoManage,
      handleMenu,
      setAccount,
      setApplyJob,
      setUserCollectionJob,
      isShowResume,
      isShowInfo,
      isShowAccount,
      isUserApplyJob,
      isUserCollectionJob,
      index,
    }
  }

}
</script>
<style scoped>
.inner {
  width: 1200px;
  margin: 0 auto;
}

.home-inner {
  max-width: 1200px;
}

#header {
  font-family: '微软雅黑';
  height: 58px;
  background-color: #545c64;
}

#main {
  margin-top: 25px;
  height: 1200px;
  display: flex;
}

.content {
  margin-left: 20px;
  width: 950px;
  height: auto;
  /* background-color: red; */
}

.mb-2 {
  font-family: '微软雅黑';
  border-bottom-style: solid;
  height: 27px;
  width: 75px;
  display: flex;
  align-items: center;
  border-width: 2px;
  margin-bottom: 5px;
  border-bottom-color: #7777e7;
}

.item {
  width: 150px;
  /* background-color: #FFF; */
}

.el-menu {
  width: 150px;
  background-color: #FFF;
  border: 0;
}

.el-sub-menu .el-menu-item {
  background-color: rgb(247, 241, 241);
  min-width: 150px;
}
</style>